import { useState } from "react";
import { useNavigate } from "react-router-dom";

const Basic = () => {
    // 直接定义的变量（name1）不是响应式的，修改后不会触发重新渲染
    let name1 = "zhangsan";

    // 使用 useState 创建的响应式状态（name2），修改后会触发组件重新渲染
    const [name2, setName2] = useState("lisi");

    const changeName = (name: string) => {
        name1 = name; // 这行不会触发重新渲染
        setName2(name); // 这行会触发重新渲染
    };

    const Navigate = useNavigate();

    const goRouteParams = () => {
        Navigate("/app/routeParams?id=123", { replace: true, state: { from: "basic" } });
    };

    return (
        <div>
            <div>name1: {name1}（非响应式，不会更新）</div>
            <div>name2: {name2}（响应式，会更新）</div>
            <button onClick={() => changeName("wangwu")}>changeName</button>
            <br />
            <button onClick={() => goRouteParams()}>goRouteParams</button>
        </div>
    );
};

export default Basic;
